<template>
	<div class="content">
		<div class="answer_con">
			<div class="question">
				<!-- 题目 -->
				<div class="queName">
					<span class="queType">{{ topic.qusTypeName }}</span>
					<h1 class="f20">{{ topic.number }}、{{ topic.queTitle }}</h1>
				</div>
				<!-- 选项 -->
				<div class="queOption">
					<div class="OptionLi"  v-for="(item, index) in options" :key="index" @click="choseOption(index)">
						<!-- <i v-if="!isFinished || isNormalOption(index) || isRecitation">{{ toChar(index) }}</i>
						<i v-else-if="isRightAnswer(index)" class="iconfont icon-_datixuanxiang iconRight" />
						<i v-else class="iconfont icon-x_datixuanxiang iconFalse" /> -->
                        <i v-if="!isFinished || isNormalOption(index) || isRecitation">{{ toChar(index) }}</i>  
						{{ item }}
					</div>
				</div>
			</div>
			<!-- 题目操作 -->
			<div class="optionOpra">
				<div class="optionNum f18">
					<span @click="lastNumer">上一题</span>
					<span @click="nextNumer">下一题</span>
				</div>
				<div class="optionCheck f18" @click="showScantron">
					<span>答题卡</span>
				</div>
			</div>
			<!-- 设置跳转 -->
			<div class="queSet f16">
				<div class="queSetPro">
					当前进度: {{ topic.number }}
					<span>/{{ Question.length }}</span>
				</div>
			</div>
			<!-- 答题卡 -->
			<Scantron :CountVO="CountVO" :topicType="topicType" v-show="scantron"></Scantron> 
		</div>
	</div>
</template>

<script>
export default {
	name: 'examAnswer',
	props: {
		CountVO: {
			//题卡
			type: Object,
			required: true
		},
		Question: {
			//题目
			type: Array,
			required: true
		},
		correctCount: {
			//正确数量
			type: Number
		},
		errorCount: {
			//错误数量
			type: Number
		},
		isRecitation: {
			type: Boolean
		}
	},
	data() {
		return {
            scantron:false,
			curNumber: 0, //当前题目索引
			userChoice: [], //选择的答案
			isFinished: false, //是否完成
			topic: {}, //当前
			isCorrecting: true,
			topicType: [], //题卡
			groupCount: 100,//每组数量
		};
	},
	watch: {
		topic: {
			immediate: true,
			deep: true,
			handler(n) {
				//背题模式
				if (this.isRecitation) {
					this.isFinished = true;
					this.userChoice = [];
					return;
				}
				//正常做题
				this.userChoice = n.userChoice ? n.userChoice.split('') : [];
				// if (this.isCorrecting) this.isFinished = this.manualViewAnalysis = n.isCorrect !== null || false;
				//题卡
				['单选题', '多选题', '判断题'].map(name => {
					this.topicType.push({ name, count: 0, startIndex: 0, group: null, score: null });
				});
				//题目数量 /分值;
				this.topicType[0].count = this.CountVO.singleChoiceCount;
				this.topicType[0].score = this.CountVO.singleChoiceScore;
				this.topicType[1].count = this.CountVO.multipleChoiceCount;
				this.topicType[1].score = this.CountVO.multipleChoiceScore;
				this.topicType[2].count = this.CountVO.trueFalseCount;
				this.topicType[2].score = this.CountVO.trueFalseScore;
				//题目开始下标
				this.topicType[1].startIndex = this.CountVO.singleChoiceCount;
				this.topicType[2].startIndex = this.CountVO.singleChoiceCount + this.CountVO.multipleChoiceCount;
				// 	//题号分组
				this.topicType[0].group = this.groupTopicNumber(this.CountVO.singleChoiceCount, 0, this.groupCount);
				this.topicType[1].group = this.groupTopicNumber(this.CountVO.multipleChoiceCount, this.topicType[1].startIndex, this.groupCount);
				this.topicType[2].group = this.groupTopicNumber(this.CountVO.trueFalseCount, this.topicType[2].startIndex, this.groupCount);
			}
		},
		curNumber: {
			handler() {
				this.topic = this.Question[this.curNumber];
			}
		}
	},
	computed: {
		options() {
			//提取选项
			const topic = this.topic;
			if (this.topic.qusTypeId === 3) {
				return ['正确', '错误'];
			}
			return Object.keys(topic)
				.filter(key => key.includes('queOption'))
				.reduce((opList, opKey) => {
					if (topic[opKey] && topic[opKey] !== '') opList.push(topic[opKey]);
					return opList;
				}, []);
		},
		isShowAnalysis() {
			if (this.isFinished || this.isRecitation) return true;
			return false;
		},
		isSingleTopic() {
			//是否正确
			return /1|3/.test(this.topic.qusTypeId);
		},
		formatUserChoice() {
			return this.userChoice.join('');
		}
	},
	beforeUpdate() {
		this.topic = this.Question[this.curNumber];
	},
	methods: {
        // 显示答题卡
        showScantron(){
            this.scantron = this.scantron?false:true
        },
		lastNumer() {
			// 上一题
			if (this.curNumber != 0) {
				this.curNumber--;
			}
		},
		nextNumer() {
			// 下一题
			if (this.curNumber != this.Question.length) {
				this.curNumber++;
			}else{
				return
			}
		},
		toChar(num) {
			//数字转字母
			return String.fromCharCode(65 + num);
		},
		choseOption(index) {
			const optionCh = this.toChar(index);
			let ques = this.topic;
			const opIndex = ques.rightAnswer.indexOf(optionCh);
			//单选/判断
			if (this.isSingleTopic) {
				this.$set(this.userChoice, 0, optionCh);
			} else if (opIndex === -1) {
				//多选选中
				this.userChoice.push(optionCh);
			} else this.userChoice.splice(opIndex, 1); //多选取消
			this.$nextTick(function() {
				if (this.isCorrecting) this.isFinished = this.isSingleTopic;
			});
		},
	
		
		groupTopicNumber(count, baseNumber, groupSize = 100) {
			//对题号进行分组
			const group = [];
			const fullGroup = count / groupSize;
			for (let i = 1; i < fullGroup + 1; i++) {
				const start = (i - 1) * groupSize + 1;
				let end;
				if (fullGroup < i && count % groupSize) end = count;
				else end = i * groupSize;
				end && group.push({ start: start + baseNumber, end: end + baseNumber });
			}
			return group;
		}
	}
};
</script>
<style scoped>
/deep/.el-checkbox__label {
	font-size: 16px;
}
</style>
